<template>
  <div class="search" @click="search">
    <van-icon name="search" color="#39ce6a" size="30" />
    <div class="notice">
      <!-- 垂直滚动 -->
      <van-notice-bar color="#000" background="#fff" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <van-swipe-item v-for="re in default_keywords" :key="re">
            <div class="" style="display: flex; align-items: center">
              <div>{{ re }}</div>
              <img
                src="https://staff.chunyu.mobi/@/media/images/2023/12/08/325c/86b618a0a5d3_w42_h42_.png"
                alt=""
                width="14"
              />
            </div>
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <button class="btn-search">搜索</button>
  </div>
  <div class="point">
    <img
      src="https://staff.chunyu.mobi/@/media/images/2022/08/10/af07/b4f21555fe8e_w102_h102_.gif"
      alt=""
      class="point_img"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getjigou } from '../../../api/http'
import { useRouter } from 'vue-router'
//垂直滚动 default_keywords
const default_keywords = ref()
// 路由跳转
const router = useRouter()
getjigou().then(res => {
  // console.log(res.data);
  const { search_config } = res.data
  default_keywords.value = search_config.default_keywords
})
const search = () => {
    router.push('/ShouSearch')
}
</script>

<style lang="scss" scoped>
.search {
  left: 10px;
  // flex: 5;
  width: 85%;
  height: 83%;
  background: #fff;
  border: 1px solid #47c58e;
  border-radius: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .notice {
    flex: 2;
    height: 40px;
    background: white;

    .notice-swipe {
      height: 35px;
      line-height: 35px;
    }
  }

  .btn-search {
    width: 20%;
    height: 100%;
    border: 1px solid;
    border-radius: 25px;
    text-align: center;
    background: #47c58e;
    color: white;
    font-size: 15px;
  }
}

.point {
  .point_img {
    width: 80%;
  }

  background: white;
  flex: 1;
  text-align: center;
}
</style>